<template>
  <div class="app-container">
    <div class="container">
      <div class="main page page-list">
        <div class="head-container">
          <el-card shadow="never">
            <div class="search-bar pd">
              <el-form
                :inline="true"
                :model="searchModel"
                size="mini"
                class="demo-form-inline"
              >
                <el-form-item label="用户编号">
                  <el-input
                    v-model="searchModel.userId"
                    placeholder="用户编号"
                  />
                </el-form-item>
                <el-form-item label="企业名称">
                  <el-input
                    v-model="searchModel.businessName"
                    placeholder="企业名称"
                  />
                </el-form-item>
                <el-form-item label="审核状态:">
                  <el-radio-group
                    @change="getList(1)"
                    v-model="searchModel.userBusinessAuthAuditStatus"
                  >
                    <el-radio-button label="">不限</el-radio-button>
                    <el-radio-button label="init">待提交</el-radio-button>
                    <el-radio-button label="auditing">审核中</el-radio-button>
                    <el-radio-button label="normal">已认证</el-radio-button>
                    <el-radio-button label="fail">审核拒绝</el-radio-button>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="审核时间">
                  <el-date-picker
                    v-model="searchModel.auditTime"
                    :default-time="['00:00:00']"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  />
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="default" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>

        <div class="data-list-wrap">
          <el-card shadow="never">
            <el-table
              v-loading="loading"
              :data="list"
              size="mini"
              style="width: 100%"
            >
            <el-table-column prop="auditSubmitTime" label="审核提交时间" />
              <el-table-column prop="userId" label="用户编号" />
              <el-table-column prop="businessName" label="企业名称" />
              <el-table-column
                prop="uniformSocialCreditCode"
                label="统一社会信用代码"
              />
              <el-table-column label="审核状态">
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.userBusinessAuthAuditStatus === 'init'"
                    style="color: #909399"
                    >待提交</span
                  >
                  <span
                    v-if="scope.row.userBusinessAuthAuditStatus === 'auditing'"
                    style="color: #409eff"
                    >审核中</span
                  >
                  <span
                    v-if="scope.row.userBusinessAuthAuditStatus === 'normal'"
                    style="color: #67c23a"
                    >已认证</span
                  >
                  <span
                    v-if="scope.row.userBusinessAuthAuditStatus === 'fail'"
                    style="color: #f56c6c"
                    >审核拒绝</span
                  >
                </template>
              </el-table-column>

              <el-table-column label="法人营业执照">
                <template slot-scope="scope">
                  <el-image
                    class="images-body"
                    :src="scope.row.businessLicense"
                    :preview-src-list="[scope.row.businessLicense]"
                  ></el-image>
                </template>
              </el-table-column>

              <el-table-column prop="idCardFront" label="法人身份证正面">
                <template slot-scope="scope">
                  <el-image
                    class="images-body"
                    :src="scope.row.idCardFront"
                    :preview-src-list="[scope.row.idCardFront]"
                  ></el-image>
                </template>
              </el-table-column>

              <el-table-column prop="idCardFront" label="法人身份证反面">
                <template slot-scope="scope">
                  <el-image
                    class="images-body"
                    :src="scope.row.idCardBack"
                    :preview-src-list="[scope.row.idCardBack]"
                  ></el-image>
                </template>
              </el-table-column>

              <el-table-column label="法人信息详情" width="200">
                <template slot-scope="scope">
                  <div class="probation-title">
                    法人姓名：{{ scope.row.name }}
                  </div>
                  <div class="probation-title">
                    法人身份证号：{{ scope.row.idCard }}
                  </div>
                  <div class="probation-title">
                    法人手机：{{ scope.row.phone }}
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="审核信息">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.auditMessage ? scope.row.auditMessage : "-" }}
                  </div>
                </template>
              </el-table-column>
       
              <el-table-column prop="auditTime" label="审核时间" />
              <el-table-column fixed="right" label="操作" width="180">
                <template slot-scope="scope">
                  <div class="cz-button">
                    <div
                      v-if="
                        scope.row.userBusinessAuthAuditStatus === 'auditing'
                      "
                    >
                      <el-popover
                        placement="top"
                        width="200"
                        :ref="'auditSuccess' + scope.row.id"
                        trigger="click"
                      >
                        <p>是否审核通过？</p>
                        <div style="text-align: right; margin: 0">
                          <el-button
                            size="mini"
                            type="text"
                            @click="
                              $refs['auditSuccess' + scope.row.id].doClose()
                            "
                            >取消</el-button
                          >
                          <el-button
                            :loading="opLoading"
                            type="primary"
                            size="mini"
                            @click="businessAuditSuccess(scope.row.id)"
                            >确定</el-button
                          >
                        </div>
                        <el-button
                          v-permission="['ADMIN','user-business-auth::audit-success']"
                          size="mini"
                          type="primary"
                          slot="reference"
                          :value="scope.row.id"
                        >
                          审核成功
                        </el-button>
                      </el-popover>
                    </div>

                    <el-button
                      style="margin-top: 8px"
                      v-if="
                        scope.row.userBusinessAuthAuditStatus === 'auditing'
                      "
                      v-permission="['ADMIN','user-business-auth::audit-fail']"
                      size="mini"
                      type="danger"
                      @click="businessAuditFail(scope.row)"
                    >
                      审核失败
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="paging-wrap">
              <el-pagination
                :current-page="searchModel.pageNo"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="searchModel.pagesize"
                :total="searchModel.count"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-card>
        </div>
        <!-- 审核失败 -->
        <el-dialog
          title="审核失败"
          :close-on-click-modal="false"
          :modal-append-to-body="false"
          width="50%"
          :visible.sync="dialogFailVisible"
        >
          <el-input
            type="textarea"
            :rows="2"
            v-model="auditFailForm.auditMessage"
            placeholder="请输入审核失败原因"
          ></el-input>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFailVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="sureAuditFail"
              :loading="opFailLoading"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  searchUserBusinessAuth,
  userBusinessAuditSuccess,
  userBusinessAuditFail,
} from "@/api/business";
const defaultModel = {
  userId: "",
  businessName: "",
  auditTime: "",
  userBusinessAuthAuditStatus: "",
  pageNo: 1,
  pageSize: 10,
  count: 0,
};
export default {
  data() {
    return {
      searchModel: _.cloneDeep(defaultModel),
      list: [],
      loading: false,
      dialogFailVisible: false,
      visible: false,
      auditFailForm: {},
      opLoading: false,
      opFailLoading: false,
    };
  },
  created() {
    // 初始化数据
    this.getList(1);
  },
  methods: {
    // 修改分页
    handleSizeChange(val) {
      this.searchModel.pageSize = val;
      this.getList(1);
    },
    // 修改页面
    handleCurrentChange(val) {
      this.loading = true;
      this.getList(val);
    },
    //审核通过
    businessAuditSuccess(id) {
      this.opLoading = true;
      userBusinessAuditSuccess(id)
        .then((resp) => {
          if (resp.success) {
            this.$notify({
              title: "审核成功",
              type: "success",
              duration: 2500,
            });
            this.$refs["auditSuccess" + id].doClose();
            this.search();
          } else {
            this.$message.error(resp.resultMessage);
          }
          this.opLoading = false;
        })
        .catch((err) => {});
    },
    //审核失败
    businessAuditFail(row) {
      this.dialogFailVisible = true;
      this.auditFailForm = _.cloneDeep(row);
      console.log(this.auditFailForm);
    },
    //确定审核失败
    sureAuditFail() {
      this.opFailLoading = true;
      let form = {
        id: this.auditFailForm.id,
        auditMessage: this.auditFailForm.auditMessage,
      };
      userBusinessAuditFail(form)
        .then((resp) => {
          if (resp.success) {
            this.$notify({
              title: "操作成功",
              type: "success",
              duration: 2500,
            });
            this.dialogFailVisible = false;
            this.search();
          } else {
            this.$message.error(resp.resultMessage);
          }
          this.opFailLoading = false;
        })
        .catch((err) => {});
    },

    getList(pageNo) {
      var self = this;
      this.loading = true;
      if (pageNo != undefined) {
        this.searchModel.pageNo = pageNo;
      }
      let searchModel = _.cloneDeep(this.searchModel);
      searchUserBusinessAuth(this.compileSearchModel(searchModel))
        .then((data) => {
          self.searchModel.pageNo = ++data.pageNo;
          self.searchModel.count = data.count;
          self.searchModel.pageSize = data.pageSize;
          self.list = data.data;
          self.loading = false;
        })
        .catch((err) => {});
    },

    // 重置查询条件
    reset() {
      this.searchModel = _.cloneDeep(defaultModel);
      this.getList(1);
    },
    // 查询
    search() {
      this.getList(1);
    },
    // 对searchModel进行处理
    compileSearchModel(searchModel) {
      searchModel.pageNo = searchModel.pageNo - 1;
      if (searchModel.auditTime && searchModel.auditTime.length) {
        searchModel["createMinTime"] = searchModel.auditTime[0];
        searchModel["createMinTime"] = searchModel.auditTime[1];
      }
      delete searchModel.auditTime;
      return searchModel;
    },
  },
};
</script>

<style lang="scss" scoped>
.operations {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.images-body {
  width: 56px;
  height: 56px;
  border-radius: 8px;
}
.cz-button {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
</style>
